<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/commons/global.jsp" %>
<style>
</style>
<script type="text/javascript">
    var processInsCcDataGrid;
    $(function() {
        processInsCcDataGrid = $('#processInsCcDataGrid').datagrid({
            url : '${path}/processInsCc/dataGrid?userIdCcs=<shiro:principal property="id"/>',
            striped : true,
            rownumbers : true,
            pagination : true,
            singleSelect : true,
            idField : 'id',
            sortName : 'id',
            sortOrder : 'asc',
            pageSize : 20,
            pageList : [ 10, 20, 30, 40, 50, 100, 200, 300, 400, 500 ],
            columns : [ [
                {
                    width : '100',
                    title : '流程实例ID',
                    field : 'processInstanceId'
                },
                {
                    width : '300',
                    title : '标题',
                    field : 'title'
                }, {
                    width : '100',
                    title : '状态',
                    field : 'readStatus',
                    formatter:function(value,row,index){
                        if(value==1) {
                            return '<span style="color:green;">已读</span>'
                        }
                        return '<span style="color:red;">未读</span>'

                    }
                },
                {
                    width : '150',
                    title : '知会时间',
                    field : 'createTime'
                    ,formatter : function(value, row, index) {
                        return datetime2Str(value)
                    }
                }

            ]],
            frozenColumns : [ [{
                field : 'action',
                title : '操作',
                width : 100,
                formatter : function(value, row, index) {
                    var str = '';
                        str += $.formatString('<a href="javascript:void(0)" class="processInsCc-easyui-linkbutton-view" data-options="plain:true,iconCls:\'fi-magnifying-glass\'" onclick="viewprocessInsCcFun(\'{0}\',\'{1}\',\'{2}\');" >查看</a>',row.id,row.businessKey, row.processInstanceId);
                    return str;
                }
            } ] ],
            onLoadSuccess:function(data){
                $('.processInsCc-easyui-linkbutton-view').linkbutton({text:'查看'});
            },
            toolbar : '#processInsCcToolbar'
        });
    });


    function viewprocessInsCcFun(objId,businessKey,processInstanceId){
        var userId='<shiro:principal property="id"/> ';
        $.ajax({
            url:'${ctxPath}/processInsCc/updateReadStatus?objId='+objId+"&userId="+userId,
            dataType:'json',
            success:function(data){

            }
        });
        var title="查看";
        var url="${ctxPath}/example/"+businessKey+"/view"+businessKey+"info/"+processInstanceId;
        var dialog= $('<div>').dialog({
            title:title,
            href:url,
            width : '80%',
            height : '80%',
            modal:true,
            onClose : function() {
                $(this).dialog('destroy');
            },
            buttons:[{
                text:'关闭',
                handler:function () {
                    dialog.dialog('close');
                }
            }]
        })
    }




    function searchprocessInsCcFun() {
        processInsCcDataGrid.datagrid('load', $.serializeObject($('#searchprocessInsCcForm')));
    }
    function cleanprocessInsCcFun() {
        $('#searchprocessInsCcForm input').val('');
        $('#searchprocessInsCcForm')[0].reset();
        processInsCcDataGrid.datagrid('load', {});
    }
</script>
<div class="easyui-layout" data-options="fit:true,border:false">
    <div data-options="region:'center',border:false">
        <table id="processInsCcDataGrid" data-options="fit:true,border:false"></table>
    </div>
</div>
<div id="processInsCcToolbar" style="display: none;">
    <form id="searchprocessInsCcForm">
        <table>
            <tr>
                <td>标题</td>
                <td>
                    <input name="title"   type="text" placeholder="请输入标题" class="easyui-text  span2" >
                </td>
                <td>状态</td>
                <td>
                    <select name="readStatus" class="easyui-text">
                        <option value="">请选择</option>
                        <option value="0">未读</option>
                        <option value="1">已读</option>
                    </select>
                </td>

                <td>流程实例ID</td>
                <td>
                    <input name="processInstanceId"   type="text" placeholder="请输入流程实例ID" class="easyui-text  span2" >
                </td>

                <td>知会时间</td>
                <td>
                    <input name="createTimeStart"  type="text"  class="easyui-text easyui-datebox  span2">
                    ~<input name="createTimeEnd"  type="text"  class="easyui-text easyui-datebox  span2">
                </td>
                <td>
                    <a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'fi-magnifying-glass',plain:true" onclick="searchprocessInsCcFun();">查询</a>
                    <a href="javascript:void(0);" class="easyui-linkbutton" data-options="iconCls:'fi-x-circle',plain:true" onclick="cleanprocessInsCcFun();">清空</a>
                </td></tr>

        </table>
    </form>
</div>
